<template>
  <div class="home">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- 搜索框 Strat -->
    <van-search disabled v-model="value" shape="round" show-action placeholder="在千万海外商品中搜索" @click="onSearch">
      <template #action>
        <div v-if="true" class="loginbtn" @click="onLogin">登录/注册</div>
        <div v-else class="img">
          <van-image @click="onHead" width="0.64rem" height="0.64rem" fit="contain" :src="headpic" />
        </div>
      </template>
    </van-search>
    <!-- 搜索框 End -->

    <!-- 活动分类 Strat -->
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="item in activeImgs" :key="item.img">
        <van-image :src="item" />
      </van-grid-item>
    </van-grid>
    <!-- 活动分类 End -->

    <!-- 硬核补贴 Strat -->
    <van-cell-group inset>
      <van-cell value="大牌底价补贴" is-link>
        <template #title>
          <img class="custom-title" :src="require('@/assets/img/subsidy/logo.png')">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </template>
      </van-cell>
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="item in subsidyImgs" :key="item.price">
          <van-image :src="item.img" />
          <template>
            <div class="price">
              <p>硬核价<b>￥{{ item.yprice }}</b></p>
              <del>￥{{ item.price }}</del>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <!-- 硬核补贴 End -->

    <!-- 推荐页签 Strat -->
    <van-tabs v-model="tabactive" animated>
      <van-tab v-for="(item, index) in recommandDatas" :key="index">
        <template v-slot:title>
          <div>
            <div class="top">{{ item.topText }}</div>
            <div class="bottom">{{ item.bottomText }}</div>
          </div>
        </template>
        <van-list offset="30" v-model="item.loading" :finished="item.finished" finished-text="没有更多了"
          @load="onLoad(index)">
          <van-row gutter="10">
            <van-col span="12" v-for="(good, index1) in item.recommandlist" :key="index1 + good.goodsItem.goodsName"
              :title="good.title">
              <router-link :to="{ name: 'detail', params: { id: good.goodsItem.goodsId } }">
                <div class="good">
                  <img :src="good.goodsItem.goodsImage" class="bigimg">
                  <div class="name">
                    <img :src="good.goodsItem.countryLogo">
                    <span>{{ good.goodsItem.countryName }}</span>
                  </div>
                  <div class="title">
                    <img v-show="good.goodsItem.titleForeHeadLabelList[0]"
                      :src="good.goodsItem.titleForeHeadLabelList[0]">
                    <span>{{ good.goodsItem.goodsName }}</span>
                  </div>
                  <div class="info">
                    <span v-for="tag in good.goodsItem.labelListWithStyle" :key="tag.content">{{ tag.content }}</span>
                  </div>
                  <div class="price">
                    <span>优惠价￥</span>
                    <b>{{ good.goodsItem.enjoyPriceInfo.enjoyPriceInteger }}</b>
                  </div>
                </div>
              </router-link>
            </van-col>
          </van-row>
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- 推荐页签 End -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
  },
  created() {
    this.$api.getMiniAppRecommendFeedsTab({
      recommendFeedsTabParam: {
        callSource: "APP_DG_MOBILE_WAP"
      }
    }).then(res => {
      // console.log(res);
      for (let i = 0; i < 5; i++) {
        // console.log(res.body.tabs[i]);
        this.recommandDatas[i].topText = res.body.tabs[i].title;
        this.recommandDatas[i].bottomText = res.body.tabs[i].sellPoint
      }
    }),
      this.onLoad(0);
  },
  data() {
    return {
      recommandDatas: [
        {
          topText: "精选",
          bottomText: "猜你喜欢",
          recommandlist: [],
          loading: false,
          finished: false,
          pageNo: 1
        },
        {
          topText: "美妆",
          bottomText: "魅力装扮",
          recommandlist: [],
          loading: false,
          finished: false,
          pageNo: 1
        },
        {
          topText: "母婴",
          bottomText: "家有萌宝",
          recommandlist: [],
          loading: false,
          finished: false,
          pageNo: 1
        },
        {
          topText: "美食",
          bottomText: "吃货挚爱",
          recommandlist: [],
          loading: false,
          finished: false,
          pageNo: 1
        },
        {
          topText: "数码",
          bottomText: "酷玩科技",
          recommandlist: [],
          loading: false,
          finished: false,
          pageNo: 1
        }
      ],
      value: '',
      headpic: require("@/assets/img/headpic/head.png"),
      activeImgs: [
        require("@/assets/img/activate/1.png"),
        require("@/assets/img/activate/2.png"),
        require("@/assets/img/activate/3.png"),
        require("@/assets/img/activate/4.png"),
        require("@/assets/img/activate/5.png")
      ],
      time: 30 * 60 * 60 * 1000,
      subsidyImgs: [
        {
          img: require("@/assets/img/subsidy/1.jpg"),
          yprice: 113,
          price: 229
        },
        {
          img: require("@/assets/img/subsidy/2.jpg"),
          yprice: 177,
          price: 340
        },
        {
          img: require("@/assets/img/subsidy/3.jpg"),
          yprice: 631,
          price: 980
        },
        {
          img: require("@/assets/img/subsidy/4.jpg"),
          yprice: 105,
          price: 296
        }
      ],
      tabactive: 0,
    };
  },
  methods: {
    onLogin() {
      console.log("点击了登录");
      // 全局定义使用
      this.$toast({
        message: '点击了登录',
        icon: 'like-o',
      })
      // 局部定义使用
      // Toast({
      //   message: '自定义图标',
      //   icon: 'like-o',
      // });
    },
    onHead() {
      console.log("点击了头像");
    },
    onSearch() {
      this.$router.push({
        name: "search"
      })
    },
    onLoad(i) {
      // console.log("第", i, "个页签的load");
      // 修正每次都会触发其他页签下的load
      if (i == this.tabactive) {
        this.$api.getMiniAppRecommendFeeds({
          "recommendFeedsParam": {
            "callSource": "APP_DG_MOBILE_WAP",
            "extraMap": {
              "single": "1"
            },
            "pageNo": this.recommandDatas[this.tabactive].pageNo,
            "pageSize": 20,
            "tabId": this.tabactive
          }
        }).then(res => {
          this.recommandDatas[this.tabactive].pageNo++;
          // console.log(res);
          this.recommandDatas[this.tabactive].recommandlist = this.recommandDatas[this.tabactive].recommandlist.concat(res.body.recList)
          this.recommandDatas[this.tabactive].loading = false;
          if (!res.body.hasMore) {
            this.recommandDatas[this.tabactive].finished = true;
          }
        })



        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        // setTimeout(() => {
        //   for (let i = 0; i < 10; i++) {
        //     this.recommandDatas[this.tabactive].recommandlist.push({
        //       bigImg: require("@/assets/img/good/1.jpg"),
        //       smallImg: require("@/assets/img/good/small-1.png"),
        //       name: "科颜氏",
        //       typeImg: require("@/assets/img/good/type-1.png"),
        //       title: "【明星面霜】Kiehl's 科颜氏高保湿面霜 125ml 补水修护 角鲨烷保湿不油腻",
        //       info: "下单立减81元",
        //       flag: true,
        //       price: 279
        //     });
        //   }

        //   // 加载状态结束
        //   this.recommandDatas[this.tabactive].loading = false;

        //   // 数据全部加载完成
        //   if (this.recommandDatas[this.tabactive].recommandlist.length >= 40) {
        //     this.recommandDatas[this.tabactive].finished = true;
        //   }
        // }, 1000);
      }
    },
  },
}
</script>

<style lang="less">
.home {
  background-color: #f5f5f5;

  .van-search {
    padding: 5px 0px 5px 12px !important;

    .van-search__content {
      background-color: transparent;
      border: 1px solid red;
      height: 28px;
      line-height: 28px;
      padding-left: 10px;

      .van-cell {
        margin-top: -5px;
      }

      .van-icon {
        color: red;
        font-size: 14px;
        font-weight: bold;
        margin-right: 5px;
        line-height: 27px;
      }
    }

    .van-search__action {
      border-radius: 2px;
      overflow: hidden;
      color: red;
      height: 28px;
      font-size: 12px;
      line-height: 25px;
      text-align: center;
      padding: 0;
      margin-left: 10px;
      margin-right: 10px;

      .loginbtn {
        border: 1px solid red;
        padding: 0px 3px;
      }

      .img {
        margin-right: 5px;
        margin-top: 1px;

        img {
          vertical-align: middle;
        }
      }
    }
  }

  .van-grid {
    .van-grid-item {
      .van-grid-item__content {
        background-color: transparent;
        padding: 0;
      }
    }
  }

  .van-cell-group {
    margin: 12px;

    .van-cell {
      padding: 10px 6px 10px 12px;

      .van-cell__title {
        flex: none;

        .custom-title {
          margin-right: 6px;
          vertical-align: middle;
          width: 63px;
          height: 16px;
        }

        .van-count-down {
          vertical-align: middle;
          display: inline-block;

          .colon {
            display: inline-block;
            margin: 0 2px;
            color: #f7261d;
          }

          .block {
            display: inline-block;
            width: 20px;
            color: #fff;
            font-size: 12px;
            height: 16px;
            text-align: center;
            background-color: #f7261d;
            border-radius: 3px;
          }
        }
      }

      .van-cell__value {
        color: #f7261d;
        font-size: 12px;
      }

      .van-icon {
        color: #f7261d;
        font-size: 12px;
        margin-left: 0px;
      }
    }

    .van-grid-item {
      .van-image {
        height: 78px;
      }

      .price {
        line-height: 16px;
        font-size: 12px;
        color: #f7261d;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        b {
          font-weight: 700;
          font-size: 15px;
        }

        del {
          color: #999;
        }
      }
    }
  }

  .van-tabs {
    margin: 0px 10px 50px;

    .van-tabs__wrap {
      .van-tabs__nav {
        background-color: transparent;

        .van-tab {
          .van-tab__text {
            -webkit-line-clamp: 2;
            text-align: center;

            .top {
              font-size: 16px;
            }

            .bottom {
              font-size: 12px;
              padding: 0px 7px;
              height: 16px;
              line-height: 16px;
            }
          }
        }
      }

      .van-tabs__line {
        display: none;
      }

      .van-tab--active {
        .top {
          color: #f7261d;
        }

        .bottom {
          background-image: linear-gradient(90deg, red, #ff3164);
          color: white;
          border-radius: 10px;
        }
      }
    }

    .van-tabs__content {

      .van-row {
        .van-col {
          .good {
            background-color: white;
            margin-top: 6px;
            padding: 5px 0px;
            display: flex;
            flex-direction: column;

            .bigimg {
              width: 174px;
              height: 174px;
              margin-bottom: 6px;
            }

            .name {
              padding: 0px 10px;
              display: flex;
              align-items: center;
              margin-bottom: 4px;

              img {
                width: 15px;
                height: 15px;
                margin-right: 6px;
              }

              span {
                font-size: 12px;
                color: #666;
              }
            }

            .title {
              padding: 0px 10px;
              display: -webkit-box;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              line-height: 18px;
              font-size: 13px;
              color: #333;

              img {
                width: 26px;
                height: 13px;
                margin-right: 3.5px;
                position: relative;
                top: 2px;
              }
            }

            .info {
              padding: 0px 10px;
              height: 25px;
              line-height: 25px;

              span {
                height: 12px;
                border: 1px solid rgba(255, 0, 0, .5);
                border-radius: 3px;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: red;
                margin-right: 3px;
                line-height: 12px;
                box-sizing: content-box;
                margin-bottom: 1px;
                padding: 0px 4px;
              }
            }

            .price {
              padding: 0px 10px;
              color: #f7261d;

              span {
                font-size: 12px;
              }

              b {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
